<template>
  <div class="home">
    <my-header :show.sync="showMask"></my-header>
    <div class="content">
      <my-input></my-input>
      <my-list></my-list>
    </div>
    
    <transition name="slide">
      <my-maks v-show="showMask" :showColors="showList" class="mask"></my-maks>
    </transition>
    
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import myMaks from '@/components/myMaks'
import myInput from '@/components/myInput'
import myList from '@/components/myList'
export default {
  name: 'Home',
  data() {
    return {
      showMask: false,
      showList: false
    }
  },
  components: {
    myHeader,
    myMaks,
    myInput,
    myList
  },

  watch: {
    showMask(to) {
      if(!to) {
        this.showList = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    position: relative;
    height: 100%;
    .content {
      padding: 0 10px;
    }
    
  }
  .mask {
    height: 100%;
  }
  .slide-enter, .slide-leave-to {
    left: -100%;
  }

  .slide-enter-active, .slide-leave-active {
    transition: all .5s;
  }
</style>
